<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>用户列表</title>
	<link rel = "Shortcut Icon" href="${ctxPath}/static/images/user_list.ico"/>
	<link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css?t=1554901098009" media="all">
	<style>
		body{margin: 10px;}
		.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
	</style>

	<style>
		#tbl{ margin-top:15px; margin-left:25px; }
		#tbl th{ height:45px; }
		#tbl td{
			font-weight:normal; height:45px;
			font-family:微软雅黑; font-size:17px;
		}
		#tbl [type='text']{
			height:28px; font-size:17px;
			text-indent:0.3em;
		}
		#tbl select { width:200px; height:32px; font-size:17px; }
		#tbl td:nth-child(1){ width:80px; }
		#tbl td:nth-child(2){ width:350px; }
		input[readonly]{
			background:#DDD;
			color:#333; border:1px solid #666;
		}
		div.layui-layer-title{
			background:#666; color:#EEE;
			font-size:15px;
		}

		label.layui-form-label{
			width:60px;
			padding-left:5px;
			padding-right:10px;
		}
		.layui-form-item .layui-inline {
			margin-right:0px;
		}
	</style>
</head>
<body>

<form class="layui-form">
	<div class="layui-form-item" style="margin-bottom:5px;">
		<div class="layui-inline">
			<label class="layui-form-label">用户昵称</label>
			<div class="layui-input-inline">
				<input type="text" name="frmNickName" id="frmNickName"
					   autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label">工号</label>
			<div class="layui-input-inline">
				<input type="text" name="frmNo" id="frmNo"
					   autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-inline">
				<input type="text" name="frmUserName"
					   id="frmUserName" autocomplete="off"
					   class="layui-input">
			</div>
		</div>
	</div>

	<div class="layui-form-item">

		<label class="layui-form-label">部门</label>
		<div class="layui-input-inline">
			<select name="frmDeptId" id="frmDeptId">
				<option value="">请选择部门</option>
				<option value="d01">总经办</option>
				<option value="d02">财务部</option>
				<option value="d03">人事部</option>
				<option value="d04">行政部</option>
				<option value="d05">开发部</option>
				<option value="d06">业务部</option>
				<option value="d07">拓展部</option>
				<option value="d08">运营部</option>
				<option value="d09">技术部</option>
				<option value="d10">制造部</option>
				<option value="sys">管理员</option>
			</select>
		</div>

		<label class="layui-form-label">性别</label>
		<div class="layui-input-inline">
			<select id="frmSex" name="frmSex" lay-filter="frmSex">
				<option value="">请选择性别</option>
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
		</div>

		<button type="button"
				class="layui-btn" onclick="testSearch();"
				style="margin-left:10px;">立即搜索</button>
		<button type="reset"
				class="layui-btn layui-btn-normal"
				onclick="reloadPage('return')"
				style="margin-left:10px;">重置</button>
	</div>
</form>


<script>
	function updateSelect( id ){
		var $sel = $( id );
		var $dd = $sel.parent().find("dd");
		for(var idx=0; idx<$dd.size(); idx++){
			var obj = $dd[ idx ];
			if( $(obj).hasClass('layui-this') ){
				var op = $( id +" option")[idx];
				$(op).attr("selected",true);
			}
		}
	}
    //表单的数据项
	var schFlds = [
		{key:'username',id:'#frmUserName'},
		{key:'nickName',id:'#frmNickName'},
		{key:'no',id:'#frmNo'},
		{key:'sex',id:'#frmSex'},
		{key:'deptId',id:'#frmDeptId'}
	];

	function testSearch(){
		//----- [填入代码] -----
		updateSelect("#frmDeptId");
		updateSelect("#frmSex");
		var cond = {};
		//迭代搜素的字段
		for (var i = 0; i < schFlds.length; i++) {
			var key = schFlds[i].key;
			var itemId = schFlds[i].id;
			//使用键值法来设置对象的key，value
			var val = $(itemId).val();
			if (val!= null) {
				cond[key] = val;
			}
		}
		console.log("搜索条件");
		console.log(cond);
		layui.table.reload(
				//表格ID
				'userTbl',
				{
					//数据接口
					url:'${ctxPath}/User/jsonList',
					//搜索条件
					where:cond,
					page: {
						//默认第一页
						curr:1
					}
				}
		);
	}
</script>


<table class="layui-hide" id="demo" lay-filter="test">
</table>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="${ctxPath}/static/layui/layui.js?t=1554901098009" charset="utf-8">
</script>
<script src="${ctxPath}/static/js/jquery-1.11.1.min.js"></script>
<script src="${ctxPath}/static/js/form.js"></script>
<!--代码写此处优先加载-->
<script>
	var role_data = [];
	var dept_data = [];


	function initRoleData() {
         $.ajax(
				 {
					 url:'${ctxPath}/User/jsonRoleOptions',
					 type:'get',
					 dataType:'json',
					 success:function (json) {
					 	role_data = json['roleJson'];
					 }
				 }
		 );
	}

	function initDeptData() {
		$.ajax(
				{
					url:'${ctxPath}/User/jsonDeptOptions',
					type:'get',
					dataType:'json',
					success:function (json) {
						dept_data = json['deptJson'];
						console.log(dept_data);
					}
				}
		);
	}
	//回调函数
     initRoleData();
	 initDeptData();

	  /**这个函数会自动被layUI调用  传一个参数：user（一条用户记录）*/
    function deptTemp(user) {
            var deptId = user.deptId;
            var deptName = findValById(dept_data,deptId);
		  return deptName;
	  }

	  function roleTemp( user ) {
    	var role = user.primaryRole;
    	var roleId = "";
    	if( role ){
			roleId = role.id;
		}
        var roleName = findValById(role_data,roleId);
    	return roleName;
	  }

    function findValById(data,id) {
		for (var i = 0;i<data.length;i++) {
			var item = data[i];
			if (item['val']==id) {
				return item['text'];
			}
		}
		return undefined;
	}

</script>




<script>
	layui.config({
		version: '1554901098009' //为了更新 js 缓存，可忽略
	});

	layui.use(
			['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'],
			function(){
				var laydate = layui.laydate //日期
						,laypage = layui.laypage //分页
						,layer = layui.layer //弹层
						,table = layui.table //表格
						,carousel = layui.carousel //轮播
						,upload = layui.upload //上传
						,element = layui.element //元素操作
						,slider = layui.slider //滑块

				//{ps} ?op=update  ?op=add
				var op = "${param['op']}";
				if( op=='add' ){
					layer.msg('添加用户成功..');
				}else if(op=='update'){
					layer.msg('更新用户成功..');
				}else {
					layer.msg('正在加载数据..');
				}

				//{ps} 监听Tab切换
				element.on('tab(demo)', function(data){
					layer.tips('切换了 '+ data.index +': '+ this.innerHTML, this, {
						tips: 1
					});
				});

				//{ps} 执行一个 table 实例
				var ran = Math.random();
				table.render({
					elem: '#demo'
					,height: 750
					,url: '${ctxPath}/User/jsonList?ran='+ ran   //数据接口
					,title: '用户列表'
					,page: true     //{ps} 开启分页
					,id: 'userTbl'
					//{ps} 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
					//toolbar: 'default'
					,totalRow: false   //{ps} 开启合计行
					,cols: [[          //{ps} 表头
						{type: 'checkbox', fixed: 'left'},

						/*------------------ [改动] -------------------*/
						{field: 'id', title: 'ID', width:130, sort: true, fixed: 'left'},
						{field: 'username', title: '用户名', width:200},
						{field: 'nickName', title: '昵称', width:150},
						{field: 'no', title: '工号', width:140},
						{field: 'sex', title: '性别', width:120},
						{title: '角色名称', width:155,templet:roleTemp},
						{title: '部门名称', width:155,templet:deptTemp},
						{field: 'createDate', title: '创建日期', width:220},
						{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
					]]
				});

				//{ps} 监听头工具栏事件
				table.on('toolbar(test)', function(obj){
					var checkStatus = table.checkStatus(obj.config.id)
							,data = checkStatus.data; //获取选中的数据
					switch(obj.event){
						case 'add':
							layer.msg('添加');
							break;
						case 'update':
							if(data.length === 0){
								layer.msg('请选择一行');
							} else if(data.length > 1){
								layer.msg('只能同时编辑一个');
							} else {
								layer.alert('编辑 [id]: '+ checkStatus.data[0].id);
							}
							break;
						case 'delete':
							if(data.length === 0){
								layer.msg('请选择一行');
							} else {
								layer.msg('删除[id]: '+ checkStatus.data[0].id);
							}
							break;
					};
				});

				//{ps} 监听行工具事件
				//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				table.on('tool(test)', function(obj){
					var data = obj.data     //获得当前行数据
							, layEvent = obj.event; //获得 lay-event 对应的值

					if(layEvent === 'detail'){
						layer.msg('查看操作');
					} else if(layEvent === 'del'){
						layer.confirm('真的删除用户么', function(index){
							 layer.msg("正在删除用户....");
                             delUser(data['id'])
						});
					} else if(layEvent === 'edit'){
						layer.msg('你点击了编辑用户..');
						//{ps}先获取角色列表, 成功拿到才显示对话框。
						getRoleData( data['id'] );
					}
				});

				//执行一个轮播实例
				carousel.render({
					elem: '#test1'
					,width: '100%' //设置容器宽度
					,height: 200
					,arrow: 'none' //不显示箭头
					,anim: 'fade' //切换动画方式
				});



				//分页
				laypage.render({
					elem: 'pageDemo' //分页容器的id
					,count: 8        //总页数
					,skin: '#1E9FFF' //自定义选中色值
					,limit: 3
					//,skip: true    //开启跳页
					,jump: function(obj, first){
						if(!first){
							layer.msg('第'+ obj.curr +'页', {offset: 'b'});
							alert( "TTTTTTTTT" );
						}
					}
				});


				slider.render({
					elem: '#sliderDemo'
					,input: true //输入框
				});

			});
</script>

<!-- {ps} 编写我们的 js 代码! -->
<script>
	//{选项数据}

	var sex_data = [
		{text:"请选择性别",val:""},
		{text:"男",val:"男"},
		{text:"女",val:"女"}
	];

	//{ps}获取角色下拉列表。。
	function getRoleData( userId ){
						var role_id = role_data;
						var op = {text:"请选择角色",val:""};
						role_id.splice(0,0,op);
						gInputs[5]['options'] = role_id;

						var dept_id = dept_data;
						var op = {text:"请选择部门",val:""};
						dept_id.splice(0,0,op);
						gInputs[6]['options'] = dept_id;
						//{2}调用editUser函数获取某用户的数据。
						editUser( userId );
	}




	function editUser( userId ){
		$.ajax(
				{
					url:'${ctxPath}/User/getUser',
					type:'post',
					data:{id:userId},
					dataType:'json',
					success:function(respTxt){
						var ret = respTxt['result'];

						if(ret=='success'){
							//{1}获取 user 对象
							var user = respTxt['user'];
							//{2}生成表格
							var tbl = makeTable( gInputs, user );
							//{3}弹出对话框
							showBox( tbl );
						}else{
							//{4}弹出错误提示。
							layer.msg( respTxt.cause );
						}
					}
				}
		);
	}

	//{ps} 把 makeTable 删除


	//{ps}用来生成表单
	//title:标题, name:表单项目名, readonly:只读, type:文本,下拉菜单,隐藏域
	var gInputs = [
		{title:"用户ID", name:"id", readonly:"readonly", type:"text"},
		{title:"用户名", name:"username", type:"text"},
		{title:"昵称", name:"nickName", type:"text"},
		{title:"工号", name:"no", type:"text"},
		{title:"性别", name:"sex", type:"select",options:sex_data},
		{title:"职位", name:"roleTemp", type:"select",options:role_data},
		{title:"部门", name:"deptTemp", type:"select",options:dept_data},
		{title:"创建日期", name:"createDate", type:"text"},
		{name:"id", type:"hide"}
	];


	function showBox( tbl ){
		layer.open({
			type: 1
			,title: '编辑用户'
			,closeBtn: false
			,area: ['450px','395px']
			,shade: 0
			,id: 'LAY_layuipro'   //设定一个 id, 防止重复弹出
			,btn: ['保存用户', '关闭对话框']
			,btnAlign: 'c'
			,moveType: 1          //拖拽模式, 0 或者 1
			,content: tbl
			,yes: function(){
				console.log("{DEBUG} 点击确认保存 ...");
				updateUser();
			}
			,success: function( layero ){
				console.log("{DEBUG} success ...");
			}
		});
	}

	var items = [
		"id", "username", "nickName", "createDate",
		"sex", "roleTemp", "no","deptTemp"
	];

	//{ps} 抓取表单数据
	function pickData(){
		//定义一个对象, 存放所有数据。
		var obj = {};
		for( var i=0; i<items.length; i++ ){
			var id = items[i];  //获取表单项 id
			var val = $("#"+id).val();
			//{3}填入 obj 对象
			obj[ id ] = val;
		}
		return obj;
	}

	/*
     *  函数: updateUser
     *  提交数据, 通过 ajax 对象。
     *	提交地址: /User/saveUser
     */
	function updateUser(){
		var obj = pickData();  //抓取表单数据..
		console.log( obj );
		$.ajax(
				{
					url:'${ctxPath}/User/update',
					type:'post',
					data:obj,
					dataType:'json',
					success:function( respTxt ){
						console.log( respTxt );
						var ret = respTxt['result'];
						if( ret=='success' ){
							layer.msg('修改用户成功:'+ obj.username);
							setTimeout(
									function(){
										reloadPage('edit');
									}, 2500 );
						}else{
							layer.msg( respTxt.cause );
						}
					}
				}
		);
	}

	function reloadPage( op ){
		window.location = '${ctxPath}/User/viewList?op='+ op;
	}

	function delUser( _id ){
		var obj = pickData();  //抓取表单数据..

		$.ajax(
				{
					url:'${ctxPath}/User/delete',
					type:'post',
					data: {id:_id},
					dataType:'json',
					success:function( respTxt ){
						console.log( respTxt );
						var ret = respTxt['result'];
						if( ret=='success' ){
							layer.msg('删除用户成功:'+ _id);
							setTimeout(
									function(){
										reloadPage('edit');
									}, 2500 );
						}else{
							layer.msg( respTxt.cause );
						}
					}
				}
		);
	}
</script>



</body>
</html>
